<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>dynamic component</title>
  <script src="/vue.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="root">
    <div class="container">
      <main>
        <keep-alive>
          <component :is="componentName"></component>
        </keep-alive>
      </main>
      <nav>
        <ul>
          <li 
            :class="{active: li.id === currentId}" 
            v-for="li in navList"
            @click="handleClick(li)"
          >
            {{li.name}}
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <script>
    Vue.component('movie', {
      template: `
        <div>movie</div>
      `
    })
    Vue.component('tv', {
      template: `
        <div>tv</div>
      `
    })

    Vue.component('home', {
      data() {
        return {
          currentComp: 'movie'
        }
      },

      template: `
        <div>
          <ul>
            <li @click="currentComp='movie'">电影</li>
            <li @click="currentComp='tv'">电视剧</li>
          </ul>
          
          <component :is="currentComp"></component>
        </div>
      `,

      destroyed() {
        console.log('home')
      },
    })
    Vue.component('search', {
      template: `
        <div>search</div>
      `
    })
    Vue.component('profile', {
      template: `
        <div>profile</div>
      `,

      mounted() {
        console.log(0)
        console.log(this.x)
        throw new Error('error.')
      },

      activated() {
        console.log('activated.')
      },

      deactivated() {
        console.log('deactivated.')
      },
    })

    var vm = new Vue({
      el: '#root',
      data: {
        currentId: '001',
        componentName: 'home',
        navList: [
          {
            id: '001',
            name: '首页',
            component: 'home'
          },
          {
            id: '002',
            name: '搜索',
            component: 'search'
          },
          {
            id: '003',
            name: '我的',
            component: 'profile'
          }
        ]
      },

      methods: {
        handleClick({ id, component }) {
          this.currentId = id
          this.componentName = component
        }
      },

      errorCaptured(error) {
        console.log(error.message)
      }
    })
  </script>
</body>
</html>